.about__container{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.about__content{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.about__title{
    font-size: var(--size-2xl);
    color: var(--clr-light);
    text-transform: capitalize;
    margin-bottom: 1rem;
}

.about__description{
    max-width: 60ch;
    font-size: var(--size-s);
    color: var(--clr-slate600);
}

.about__subtitle{
    font-size: var(--size-s);
    color: var(--clr-slate400);
}

.about__ul{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    list-style: none;
}

.about__list{
    font-size: var(--size-s);
    color: var(--clr-slate600);
}

.about__hr{
    border-color: var(--clr-slate800);
}

.about__skills{
    display: none;
}

.about__skill{
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.skill__wrapper{
    position: relative;
    height:65px;
    width: 90%;
    padding: 0.5rem;
    margin: 0 auto;
    box-sizing: content-box;
    overflow-x: hidden;
    mask-image: linear-gradient(
        90deg,
        rgba(0,0,0,0),
        rgba(0,0,0,1)5%,
        rgba(0,0,0,1)95%,
        rgba(0,0,0,0)
        );
}

@keyframes scrollEffect{
    to{
        left: -65px;
    }
}

.item{
    width: 65px;
    height:65px;
    background-color: var(--clr-dark);
    border-radius: 0.5rem;
    box-shadow: 0px 0px 15px var(--clr-shadow);
    position: absolute;
    left: max(calc(200px * 8), 100%);
    animation: scrollEffect 50s linear infinite;
    display: flex;
    justify-content: center;
    align-items: center;
}

.skill__icon{
    display: block;
    width: 70%;
    height: 70%;
    object-fit: contain;
}

.item1{
    animation-delay: calc(50s / 15 * (15 - 1) * -1);
}

.item2{
     animation-delay: calc(50s / 15 * (15 - 2) * -1);
}

.item3{
    animation-delay: calc(50s / 15 * (15 - 3) * -1);
}

.item4{
    animation-delay: calc(50s / 15 * (15 - 4) * -1);
}

.item5{
    animation-delay: calc(50s / 15 * (15 - 5) * -1);
}

.item6{
    animation-delay: calc(50s / 15 * (15 - 6) * -1);
}

.item7{
    animation-delay: calc(50s / 15 * (15 - 7) * -1);
}

.item8{
    animation-delay: calc(50s / 15 * (15 - 8) * -1);
}
.item9{
    animation-delay: calc(50s / 15 * (15 - 9) * -1);
}
.item10{
    animation-delay: calc(50s / 15 * (15 - 10) * -1);
}
.item11{
    animation-delay: calc(50s / 15 * (15 - 11) * -1);
}
.item12{
    animation-delay: calc(50s / 15 * (15 - 12) * -1);
}
.item13{
    animation-delay: calc(50s / 15 * (15 - 13) * -1);
}
.item14{
    animation-delay: calc(50s / 15 * (15 - 14) * -1);
}
.item15{
    animation-delay: calc(50s / 15 * (15 - 15) * -1);
}

.skill__btn{
    width: var(--size-2xl);
    color: var(--clr-slate600);
}






/* xs */
@media (min-width: 475px){
    .about__container{
        gap: 1.5rem;
    }
    
    .about__content{
        gap: 1.5rem;
    }
    
    .about__title{
        font-size: var(--size-3xl);
        margin-bottom: 1.5rem;
    }
    
    .about__description{
        font-size: var(--size-base);
    }
    
    .about__subtitle{
        font-size: var(--size-base);
    }
    
    .about__list{
        font-size: var(--size-base);
    }

}

/* sm */
/* @media (min-width: 640px){} */

/* md */
/* @media (min-width: 768px){} */

/* lg */
@media (min-width: 1024px){
    .about__container{
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .about__title{
        font-size: var(--size-4xl);
    }
    
    .about__description{
        font-size: var(--size-lg);
    }
    
    .about__subtitle{
        font-size: var(--size-lg);
    }
    
    .about__list{
        font-size: var(--size-lg);
    }

    .about__skill{
        display: none;
    }

    .about__skills{
        display: block;
    }

    .skills__icons{
        display: block;
        width: 100%;
        height: 100%;
        margin: 0 auto;
        object-fit: contain;
    }
    
    .about__skills{
        height: 400px;
        width: max-content;
        display: flex;
        /* gap: 1rem; */
    }
    .skills__wrapper{
        width: 120px;
        height: 100%;
        position: relative;
        overflow: hidden;
        mask-image: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0),
        rgba(0, 0, 0, 1) 20%,
        rgba(0, 0, 0, 1) 80%,
        rgba(0, 0, 0, 0)
      );
        box-sizing: content-box;
        padding-left: 0.7rem;
        padding-right: 0.7rem;
    }
    
    .item_up, .item_down{
        width: 120px;
        height: 120px;
        padding: 1rem;
        position: absolute;
        box-shadow: 0px 0px 15px var(--clr-shadow);
        border-radius: 0.5rem;
    }
    
    .item_up{
        top: 1900px;
        animation: scrollup 50s linear infinite;
    }
    .item_down{
        bottom: 1900px;
        animation: scrolldown 50s linear infinite;
    } 
    
    @keyframes scrollup{
        to{
            top: -120px;
        }
    }
    @keyframes scrolldown{
        to{
            bottom: -120px;
        }
    }

    .item1{
        animation-delay: calc(50s / 15 * (15 - 1) * -1);
    }
    
    .item2{
         animation-delay: calc(50s / 15 * (15 - 2) * -1);
    }
    
    .item3{
        animation-delay: calc(50s / 15 * (15 - 3) * -1);
    }
    
    .item4{
        animation-delay: calc(50s / 15 * (15 - 4) * -1);
    }
    
    .item5{
        animation-delay: calc(50s / 15 * (15 - 5) * -1);
    }
    
    .item6{
        animation-delay: calc(50s / 15 * (15 - 6) * -1);
    }
    
    .item7{
        animation-delay: calc(50s / 15 * (15 - 7) * -1);
    }
    
    .item8{
        animation-delay: calc(50s / 15 * (15 - 8) * -1);
    }
    .item9{
        animation-delay: calc(50s / 15 * (15 - 9) * -1);
    }
    .item10{
        animation-delay: calc(50s / 15 * (15 - 10) * -1);
    }
    .item11{
        animation-delay: calc(50s / 15 * (15 - 11) * -1);
    }
    .item12{
        animation-delay: calc(50s / 15 * (15 - 12) * -1);
    }
    .item13{
        animation-delay: calc(50s / 15 * (15 - 13) * -1);
    }
    .item14{
        animation-delay: calc(50s / 15 * (15 - 14) * -1);
    }
    .item15{
        animation-delay: calc(50s / 15 * (15 - 15) * -1);
    }
}

/* xl */
@media (min-width: 1280px){
    .about__content{
        gap: 2rem;
    }

    .about__title{
        font-size: var(--size-5xl);
        margin-bottom: 1.5rem;
    }
    
    .about__description{
        font-size: var(--size-xl);
    }
    
    .about__subtitle{
        font-size: var(--size-xl);
    }
    
    .about__list{
        font-size: var(--size-xl);
    }

    .about__skills{
        height: 450px;
    }
    .skills__wrapper{
        width: 150px;
    }
    
    .item_up, .item_down{
        width: 150px;
        height: 150px;
    }
    
    .item_up{
        top: 2400px;
        animation: scrollup 50s linear infinite;
    }
    .item_down{
        bottom: 2400px;
        animation: scrolldown 50s linear infinite;
    } 
    
    @keyframes scrollup{
        to{
            top: -150px;
        }
    }
    @keyframes scrolldown{
        to{
            bottom: -150px;
        }
    }

    .item1{
        animation-delay: calc(50s / 15 * (15 - 1) * -1);
    }
    
    .item2{
         animation-delay: calc(50s / 15 * (15 - 2) * -1);
    }
    
    .item3{
        animation-delay: calc(50s / 15 * (15 - 3) * -1);
    }
    
    .item4{
        animation-delay: calc(50s / 15 * (15 - 4) * -1);
    }
    
    .item5{
        animation-delay: calc(50s / 15 * (15 - 5) * -1);
    }
    
    .item6{
        animation-delay: calc(50s / 15 * (15 - 6) * -1);
    }
    
    .item7{
        animation-delay: calc(50s / 15 * (15 - 7) * -1);
    }
    
    .item8{
        animation-delay: calc(50s / 15 * (15 - 8) * -1);
    }
    .item9{
        animation-delay: calc(50s / 15 * (15 - 9) * -1);
    }
    .item10{
        animation-delay: calc(50s / 15 * (15 - 10) * -1);
    }
    .item11{
        animation-delay: calc(50s / 15 * (15 - 11) * -1);
    }
    .item12{
        animation-delay: calc(50s / 15 * (15 - 12) * -1);
    }
    .item13{
        animation-delay: calc(50s / 15 * (15 - 13) * -1);
    }
    .item14{
        animation-delay: calc(50s / 15 * (15 - 14) * -1);
    }
    .item15{
        animation-delay: calc(50s / 15 * (15 - 15) * -1);
    }
}

/* 2xl */
@media (min-width: 1536px){
    .about__container{
        justify-content:initial;
        flex: 1;
    }
    .about__skills{
        margin: 0 auto;
    }
}